<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>首页</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
        .router-nav {
            height: 100%;
            width: 100%;
            display: flex;
        }
        .router-item {
            flex: 1;
            text-align: center;
            font-size: 14px;
        }
        [data-dpr='2'] .router-item {
            font-size: 28px;
        }
        [data-dpr='3'] .router-item {
            font-size: 42px;
        }
        .router-item.cur {
            border-bottom: 0.04rem solid #f3af33;
            color: #f3af33;
        }
    </style>

</head>
<body>
    <div id="app">
        <header>
            <div class="router-nav">
                <div class="router-item cur">设备统计</div>
                <div class="router-item">设备地图</div>
            </div>
        </header>

        <section id="main">

        </section>


        <!--底部主菜单导航栏-->
        <nav id="nav-wrap">
            <ul class="nav-list">
                <li class="nav-list-item cur">
                    <a href="index.html">
                        <div class="nav-icon home-icon"></div>
                        <div class="nav-item-name">首页</div>
                    </a>
                </li>
                <li class="nav-list-item">
                    <a href="deviceList.html">
                        <div class="nav-icon device-icon"></div>
                        <div class="nav-item-name">设备</div>
                    </a>
                </li>
                <li class="nav-list-item">
                    <a href="events.html">
                        <div class="nav-icon event-icon"></div>
                        <div class="nav-item-name">事件</div>
                    </a>
                </li>
                <li class="nav-list-item">
                    <a href="mine.html">
                        <div class="nav-icon mine-icon"></div>
                        <div class="nav-item-name">我的</div>
                    </a>
                </li>
                <li class="clear"></li>
            </ul>
        </nav>
    </div>

    <script src="js/lib/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</body>
</html>